<template>
    <div class="chat">
        <div class="chat-user">
            <span>{{ getChatTitle() }}</span>
        </div>
        <div class="content" ref="chatContainer">
            <div v-for="item, index in chatDetailList" :key="index">
                <div class="item" v-if="item.fromUsername == userInfo.username">
                    <div class="r-create-time">
                        <span>{{ item.createTime }}</span>
                    </div>
                    <div class="right">
                        <div>
                            <div class="r-nickname nickname">
                                <span>{{ item.fromNickname }}</span>
                            </div>
                            <div class="user-content" v-if="item.fileList == null">
                                {{ item.content }}
                            </div>
                            <div v-else class="user-content">
                                <div v-for="item2, index2 in item.fileList" :key="index2" class="share-file">
                                    <MyFileImg :filename="item2.fileType" :folder="item2.folderType" size="32">
                                    </MyFileImg>
                                    <div>
                                        <el-link :underline="false" @click="saveFileCloud(item2)">{{ item2.filename
                                        }}</el-link>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="image">
                            <el-image :src="item.fromAvatar"></el-image>
                        </div>
                    </div>
                </div>
                <div class="item" v-else>
                    <div class="l-create-time">
                        <span>{{ item.createTime }}</span>
                    </div>
                    <div class="left">
                        <div class="image">
                            <el-image :src="item.fromAvatar"></el-image>
                        </div>
                        <div class="user">
                            <div class="nickname">
                                <span>{{ item.fromNickname }}</span>
                            </div>
                            <div class="user-content" v-if="item.fileList == null">
                                {{ item.content }}
                            </div>
                            <div v-else class="user-content">
                                <div v-for="item2, index2 in item.fileList" :key="index2" class="share-file">
                                    <MyFileImg :filename="item2.fileType" :folder="item2.folderType" size="32">
                                    </MyFileImg>
                                    <div>
                                        <el-link :underline="false" @click="saveFileCloud(item2)">{{ item2.filename
                                        }}</el-link>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="chat-input">
            <div class="input-icon">
                <div class="input-l">
                    <el-tooltip class="item" effect="dark" content="发送文件" placement="top">
                        <i class="el-icon-folder-opened" @click="shareFile"></i>
                    </el-tooltip>
                    <el-popover placement="top" title="表情" width="400" trigger="click">
                        <MyEmoji @busEmoji="getEmoji"></MyEmoji>
                        <i class="el-icon-collection-tag" slot="reference"></i>
                    </el-popover>
                </div>
                <div>
                    <el-tooltip class="item" effect="dark" content="清除聊天记录" placement="top">
                        <i class="el-icon-delete" @click="clearHistory"></i>
                    </el-tooltip>
                </div>
            </div>
            <el-input type="textarea" v-model="content" resize="none" :rows="2" @keydown.native="handleKeyCode($event)"
                placeholder="按下enter发送内容/Control+enter换行" class="borderNone">
            </el-input>
        </div>
        <el-dialog :visible.sync="isMove" title="发送文件">
            <MoveFile :file="moveFile" :t="t" :type="3"></MoveFile>
        </el-dialog>
        <el-dialog :visible.sync="isSave" title="保存文件">
            <MoveFile :file="moveFile" :t="t" :type="2"></MoveFile>
        </el-dialog>
    </div>
</template>

<script>
import MyFileImg from "@/components/my-file-img"
import MoveFile from '@/components/move-file'
import MyEmoji from "@/components/my-emoji"

export default {
    name: "chat-content",
    props: ['chatDetailList', 'chatInfo'],
    components: {
        MoveFile,
        MyFileImg,
        MyEmoji
    },
    data() {
        return {
            // 输入内容
            content: "",
            // 是否保存到我的云盘
            isMove: false,
            // 移动的文件
            moveFile: null,
            // 保存文件
            isSave: false,
            // 时间戳
            t: null,
        }
    },
    methods: {
        handleKeyCode(event) {
            if (event.keyCode == 13) {
                if (!event.ctrlKey) {
                    event.preventDefault();
                    this.handleSend();
                } else {
                    this.content += '\n';
                }
            }
        },
        handleSend() {
            if (this.content == null || this.content.trim() == '') {
                this.$message.warning("请输入内容")
                return
            }
            this.$emit('busChatContent', {
                content: this.content
            })
            // 清空聊天内容
            this.content = ""
        },
        getContent(item) {
            this.chatDetailList.push(item)
        },
        getChatTitle() {
            if (this.chatInfo == null) return
            let title;
            this.chatInfo.userList.forEach(item => {
                if (item.id != this.userInfo.id) {
                    title = item.nickname;
                }
            });
            return title;
        },
        shareFile() {
            this.moveFile = null
            this.isMove = true
            this.t = Date.now()
        },
        saveFileCloud(item) {
            this.moveFile = item
            this.isSave = true
            this.t = Date.now()
        },
        clearHistory() {
            this.$confirm('此操作将删除聊天记录, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.chatDetailList = []
                this.$emit('busClearChatHistory')
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            }).catch(() => {

            });
        },
        getEmoji(item) {
            this.content += item
        }
    },
    computed: {
        userInfo() {
            return this.$store.state.user.userInfo || {}
        }
    },
    updated() {
        this.$nextTick(() => {
            this.$refs.chatContainer.scrollTop = this.$refs.chatContainer.scrollHeight
        })
    },
}
</script>

<style scoped>
.chat {
    height: 100%;
    position: relative;
}

.chat-user {
    font-size: 19px;
    height: 30px;
    border-bottom: 1px solid #dee0e4;
}

.content {
    height: calc(100% - 120px);
    overflow-y: auto;
}

.chat-input {
    height: 100px;
    width: 100%;
    border: 1px solid #DCDFE6;
    border-radius: 4px;
    transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
}

::v-deep .borderNone .el-textarea__inner {
    border: none !important;
    box-shadow: 0 0 0 0px;
}

.item {
    margin: 10px 0 10px 0;
}

.r-create-time {
    margin: 5px 0 5px 0;
    font-size: 0.8rem;
    color: rgb(201, 196, 196);
    text-align: right;
}

.l-create-time {
    margin: 5px 0 5px 0;
    font-size: 0.8rem;
    color: rgb(201, 196, 196);
    text-align: left;
}


.user-content {
    background-color: #DCDFE6;
    padding: 5px 10px;
    word-wrap: break-word;
    word-break: break-all;
    overflow: hidden;
    font-weight: 440;
    color: rgb(92, 81, 81);
}


.left {
    display: flex;
}

.right {
    display: flex;
    justify-content: flex-end;
}

.image {
    width: 50px;
    text-align: center;
}

::v-deep .image img {
    width: 40px;
}

.user {
    max-width: 70%;
}

.nickname {
    font-size: 0.9rem;
    font-weight: 440;
}

.r-nickname {
    text-align: right;
}

.chat-btn {
    text-align: right;
}

.input-icon {
    padding: 5px 15px;
    height: 30px;
    color: rgb(70, 69, 69);
    font-size: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.input-icon i {
    cursor: pointer;
}

.share-file {
    display: flex;
    align-items: center;
    margin: 5px 0;
}

.input-l i {
    margin-right: 10px;
}
</style>